import React, { Component } from 'react';
import { Button,ButtonToolbar,ButtonGroup,DropdownButton,MenuItem,SplitButton,Table} from 'react-bootstrap';

export default class ButtonDemo extends Component {
    constructor(props) {
        super(props);
        this.state={
            isLoading: false
        };
       // this.handleClick=this.handleClick().bind(this);
    }



    handleClick=(e)=> {
        this.setState({isLoading: true});
        //this.state.isLoading=true;
        // This probably where you would have an `ajax` call
        setTimeout(() => {
            // Completed of async action, set loading state back
            this.setState({isLoading: false});
           // this.state.isLoading=false;
        }, 2000);
    }

    render(){
        const wellStyles = {maxWidth: 800, margin: '0 10px 10px'};
        const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link'];
        let isLoading = this.state.isLoading;
        return (
            <div >
                <div className="well" style={wellStyles}>
                <ButtonToolbar>
                    <Button>Default</Button>
                    <Button bsStyle="primary">Primary</Button>
                    <Button bsStyle="success">Success</Button>
                    <Button bsStyle="info">Info</Button>
                    <Button bsStyle="warning">Warning</Button>
                    <Button bsStyle="danger">Danger</Button>
                    <Button bsStyle="link">Link</Button>
                </ButtonToolbar>
                </div>
                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <Button bsStyle="primary" bsSize="large">Large button</Button>
                        <Button bsSize="large">Large button</Button>
                    </ButtonToolbar>
                    <ButtonToolbar>
                        <Button bsStyle="primary">Default button</Button>
                        <Button>Default button</Button>
                    </ButtonToolbar>
                    <ButtonToolbar>
                        <Button bsStyle="primary" bsSize="small">Small button</Button>
                        <Button bsSize="small">Small button</Button>
                    </ButtonToolbar>
                    <ButtonToolbar>
                        <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
                        <Button bsSize="xsmall">Extra small button</Button>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <Button bsStyle="primary" bsSize="large" block>Block level button</Button>
                    <Button bsSize="large" block>Block level button</Button>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <Button bsStyle="primary" bsSize="large" active>Primary button</Button>
                        <Button bsSize="large" active>Button</Button>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <Button href="#">Link</Button>
                        <Button>Button</Button>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <Button bsStyle="primary" bsSize="large" disabled>Primary button</Button>
                        <Button bsSize="large" disabled>Button</Button>
                    </ButtonToolbar>

                    <Button
                        bsStyle="primary"
                        disabled={isLoading}
                        onClick={!isLoading ? this.handleClick : null}>
                        {isLoading ? 'Loading...' : 'Loading state'}
                    </Button>

                </div>

                <div className="well" style={wellStyles}>
                    <h2>Buttons Props</h2>
                    <Table >
                        <thead data-reactid="186">
                        <tr data-reactid="187">
                            <th data-reactid="188">Name</th>
                            <th data-reactid="189">Type</th>
                            <th data-reactid="190">Default</th>
                            <th data-reactid="191">Description</th>
                        </tr>
                        </thead>
                        <tbody data-reactid="192">
                        <tr class="prop-table-row" data-reactid="193">
                            <td data-reactid="194">active</td>
                            <td data-reactid="197">
                                <div data-reactid="198">
                                    boolean
                                </div></td>
                            <td data-reactid="199">false</td>
                            <td data-reactid="200">
                                <div class="prop-desc" data-reactid="201"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="202">
                            <td data-reactid="203">block</td>
                            <td data-reactid="206">
                                <div data-reactid="207">
                                    boolean
                                </div></td>
                            <td data-reactid="208">false</td>
                            <td data-reactid="209">
                                <div class="prop-desc" data-reactid="210"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="211">
                            <td data-reactid="212">bsClass</td>
                            <td data-reactid="215">
                                <div data-reactid="216">
                                    string
                                </div></td>
                            <td data-reactid="217">'btn'</td>
                            <td data-reactid="218">
                                <div class="prop-desc" data-reactid="219">
                                    <p>Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="220">
                            <td data-reactid="221">bsSize</td>
                            <td data-reactid="224">
                                <div data-reactid="225">
       <span data-reactid="226">one of:<code data-reactid="228">&quot;lg&quot;</code><span data-reactid="229">, </span><code data-reactid="230">&quot;large&quot;</code><span data-reactid="231">, </span><code data-reactid="232">&quot;sm&quot;</code><span data-reactid="233">, </span><code data-reactid="234">&quot;small&quot;</code><span data-reactid="235">, </span><code data-reactid="236">&quot;xs&quot;</code><span data-reactid="237">, </span><code data-reactid="238">&quot;xsmall&quot;</code></span>
                                </div></td>
                            <td data-reactid="239"></td>
                            <td data-reactid="240">
                                <div class="prop-desc" data-reactid="241">
                                    <p>Component size variations.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="242">
                            <td data-reactid="243">bsStyle</td>
                            <td data-reactid="246">
                                <div data-reactid="247">
       <span data-reactid="248">one of:<code data-reactid="250">&quot;success&quot;</code><span data-reactid="251">, </span><code data-reactid="252">&quot;warning&quot;</code><span data-reactid="253">, </span><code data-reactid="254">&quot;danger&quot;</code><span data-reactid="255">, </span><code data-reactid="256">&quot;info&quot;</code><span data-reactid="257">, </span><code data-reactid="258">&quot;default&quot;</code><span data-reactid="259">, </span><code data-reactid="260">&quot;primary&quot;</code><span data-reactid="261">, </span><code data-reactid="262">&quot;link&quot;</code></span>
                                </div></td>
                            <td data-reactid="263">'default'</td>
                            <td data-reactid="264">
                                <div class="prop-desc" data-reactid="265">
                                    <p>Component visual or contextual style variants.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="266">
                            <td data-reactid="267">componentClass</td>
                            <td data-reactid="270">
                                <div data-reactid="271">
                                    elementType
                                </div></td>
                            <td data-reactid="272"></td>
                            <td data-reactid="273">
                                <div class="prop-desc" data-reactid="274">
                                    <p>You can use a custom element type for this component.</p>
                                </div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="275">
                            <td data-reactid="276">disabled</td>
                            <td data-reactid="279">
                                <div data-reactid="280">
                                    boolean
                                </div></td>
                            <td data-reactid="281">false</td>
                            <td data-reactid="282">
                                <div class="prop-desc" data-reactid="283"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="284">
                            <td data-reactid="285">href</td>
                            <td data-reactid="288">
                                <div data-reactid="289">
                                    string
                                </div></td>
                            <td data-reactid="290"></td>
                            <td data-reactid="291">
                                <div class="prop-desc" data-reactid="292"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="293">
                            <td data-reactid="294">onClick</td>
                            <td data-reactid="297">
                                <div data-reactid="298">
                                    function
                                </div></td>
                            <td data-reactid="299"></td>
                            <td data-reactid="300">
                                <div class="prop-desc" data-reactid="301"></div></td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="302">
                            <td data-reactid="303">
                            </td>
                            <td data-reactid="306">
                                <div data-reactid="307">
       <span data-reactid="308">one of:<code data-reactid="310">'button'</code><span data-reactid="311">, </span><code data-reactid="312">'reset'</code><span data-reactid="313">, </span><code data-reactid="314">'submit'</code></span>
                                </div></td>
                            <td data-reactid="315">'button'</td>
                            <td data-reactid="316">
                                <div class="prop-desc" data-reactid="317">
                                    <p>Defines HTML button type attribute</p>
                                </div></td>
                        </tr>
                        </tbody>
                    </Table>

                </div>

                <div className="well" style={wellStyles}>
                    <ButtonGroup>
                        <Button>Left</Button>
                        <Button>Middle</Button>
                        <Button>Right</Button>
                    </ButtonGroup>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <ButtonGroup>
                            <Button>1</Button>
                            <Button>2</Button>
                            <Button>3</Button>
                            <Button>4</Button>
                        </ButtonGroup>

                        <ButtonGroup>
                            <Button>5</Button>
                            <Button>6</Button>
                            <Button>7</Button>
                        </ButtonGroup>

                        <ButtonGroup>
                            <Button>8</Button>
                        </ButtonGroup>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonToolbar>
                        <ButtonGroup bsSize="large">
                            <Button>Left</Button>
                            <Button>Middle</Button>
                            <Button>Right</Button>
                        </ButtonGroup>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <ButtonGroup>
                            <Button>Left</Button>
                            <Button>Middle</Button>
                            <Button>Right</Button>
                        </ButtonGroup>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <ButtonGroup bsSize="small">
                            <Button>Left</Button>
                            <Button>Middle</Button>
                            <Button>Right</Button>
                        </ButtonGroup>
                    </ButtonToolbar>

                    <ButtonToolbar>
                        <ButtonGroup bsSize="xsmall">
                            <Button>Left</Button>
                            <Button>Middle</Button>
                            <Button>Right</Button>
                        </ButtonGroup>
                    </ButtonToolbar>
                </div>

                <div className="well" style={wellStyles}>
                    <ButtonGroup>
                        <Button>1</Button>
                        <Button>2</Button>
                        <DropdownButton title="Dropdown" id="bg-nested-dropdown">
                            <MenuItem eventKey="1">Dropdown link</MenuItem>
                            <MenuItem eventKey="2">Dropdown link</MenuItem>
                        </DropdownButton>
                    </ButtonGroup>
                </div>
                <div className="well" style={wellStyles}>
                    <ButtonGroup vertical>
                        <Button>Button</Button>
                        <Button>Button</Button>
                        <DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
                            <MenuItem eventKey="1">Dropdown link</MenuItem>
                            <MenuItem eventKey="2">Dropdown link</MenuItem>
                        </DropdownButton>
                        <Button>Button</Button>
                        <Button>Button</Button>
                        <DropdownButton title="Dropdown" id="bg-vertical-dropdown-2">
                            <MenuItem eventKey="1">Dropdown link</MenuItem>
                            <MenuItem eventKey="2">Dropdown link</MenuItem>
                        </DropdownButton>
                        <DropdownButton title="Dropdown" id="bg-vertical-dropdown-3">
                            <MenuItem eventKey="1">Dropdown link</MenuItem>
                            <MenuItem eventKey="2">Dropdown link</MenuItem>
                        </DropdownButton>
                    </ButtonGroup>

                    <ButtonGroup vertical block>
                        <Button>Full width button</Button>
                        <Button>Full width button</Button>
                    </ButtonGroup>

                    <ButtonGroup vertical>
                        <Button href="#">Left</Button>
                        <Button href="#">Middle</Button>
                        <DropdownButton title="Dropdown" id="bg-justified-dropdown">
                            <MenuItem eventKey="1">Dropdown link</MenuItem>
                            <MenuItem eventKey="2">Dropdown link</MenuItem>
                        </DropdownButton>
                    </ButtonGroup>

                </div>
                <div className="well" style={wellStyles}>
                    <h2>ButtonGroup Props</h2>
                    <Table border="1" striped bordered >
                        <thead>
                        <tr>
                            <th>Name</th><th>Type</th><th>Default</th><th>Description</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>block</td>
                           <td>boolean</td>
                           <td>false</td>
                           <td>Display block buttons; only useful when used with the "vertical" prop.</td>
                        </tr>
                        <tr>
                            <td>bsClass</td>
                            <td>string</td>
                            <td>'btn-group'</td>
                            <td>Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.<td></td></td>
                        </tr>
                        <tr>
                            <td> justified</td>
                            <td> boolean</td>
                            <td> false</td>
                        </tr>
                        <tr>
                            <td> vertical</td>
                            <td> boolean</td>
                            <td> false</td>
                        </tr>
                        </tbody>
                    </Table>
                </div>


            </div>
        );
    }
}